<template>
  <div id="app1">
    <div class="demo-input-suffix">
      <h2>课程管理系统</h2>
      <el-form :model="data" :rules="rules" ref="data">
        <el-form-item prop="username">
          <el-input placeholder="用户" v-model="data.username"> <template slot="prepend"><i
                class="el-icon-user"></i></template></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" v-model="data.password"> <template slot="prepend"><i
                class="el-icon-edit"></i></template></el-input>
        </el-form-item>

      </el-form>
      <div class="radios" @click="fn1">
        <el-radio-group v-model="data.userType">
          <el-radio :label="2">教师</el-radio>
          <el-radio :label="3">教务管理员</el-radio>
        </el-radio-group>
      </div>
      <el-button type="primary" @click="loging">登录</el-button>
    </div>
  </div>


</template>

<script>
import { axs } from "../api/user.js";
export default {
  data() {
    return {
      data: {
        username: '',
        password: '',
        userType: 3,
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    loging() {
      if (this.data.username == '' || this.data.password == '') {
        this.$message.error('别给老娘空着');
      } else {
        axs(this.data).then((res) => {
          console.log(res);
          console.log(res.data);
          let group = []
          for (let bit = 0; bit < 8; bit++) {
            // 0100 0000
            // 0010 0000
            if (((1 << bit) & res.data.permission) === 1 << bit) {
              group.push((1 << bit).toString());
            }
          }
          console.log(group);
          res.data.group = group
          if (res.message == 'success') {
            this.$message({
              message: '成功',
              type: 'success',
              showClose: true
            });

            this.$store.commit('login/changemyname', res.data)
            this.$router.push('/main')
          }
        })
      }

    },
    fn1() {
      console.log(this.data.userType);

    }
  }
}

</script>

<style scoped lang="scss">
#app1 {
  width: 100%;
  height: 100%;
  background-image: url(../assets/【哲风壁纸】人类世界-动画场景.png);
  background-size: 100% 100%;
}

.el-button {
  margin-left: 10%;
  width: 80%;
}

.radios {
  margin-left: 40px;

  .el-radio {
    color: #fff;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 8px 20px 5px 0px;
  }
}

#app {
  position: absolute;
}

h2 {
  text-align: center;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-weight: 500;
  border-bottom: 1px #fff solid;
}

.demo-input-suffix {
  margin: 0 auto;
  width: 400px;
  height: 300px;
  background-color: #5E5E60;
  position: relative;
  top: 50%;
  transform: translateY(-60%);
}

.el-form {
  padding: 20px 40px;
  height: 80px;
}
</style>
